<template>
	<el-card>
		<el-row slot="header" type="flex" class="row-bg" justify="space-between">
			<span>轮播图列表</span>
			<el-button v-permission="'promotion:slide:create'" icon="el-icon-circle-plus-outline" type="primary" @click="insert_dialog_visible = true" plain>添加轮播图
			</el-button>
		</el-row>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="#" prop="slide_id" type="index">
			</el-table-column>
			<el-table-column prop="title" label="链接标题">
			</el-table-column>
			<el-table-column label="轮播图片">
				<template slot-scope="scope">
					<el-avatar shape="square" :size="100" :src="scope.row.picture"></el-avatar>
				</template>
			</el-table-column>
			<el-table-column prop="url" label="跳转地址">
			</el-table-column>
			<el-table-column prop="target" label="跳转方式">
			</el-table-column>
			<el-table-column prop="slide_order" label="排序数字">
			</el-table-column>
			<el-table-column prop="usable" label="状态">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.usable === 1" type="success">启用</el-tag>
					<el-tag v-if="scope.row.usable === -1" type="warning">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="update_time" label="更新日期">
			</el-table-column>
			<el-table-column prop="create_time" label="添加日期">
			</el-table-column>
			<el-table-column label="操作" width="260">
				<template slot-scope="scope">
					<el-button v-permission="'promotion:slide:edit'" icon="el-icon-edit" @click="openEditDialog(scope.row)">编辑</el-button>
					<el-button v-permission="'promotion:slide:switch'" icon="el-icon-switch-button"
						@click="handleChange(scope.row.usable, scope.row.slide_id, scope.$index)">{{ scope.row.usable ===
							1 ? '禁用' : '启用' }}</el-button>
					<el-button v-permission="'promotion:slide:remove'" type="danger" @click="handleRemove(scope.row.slide_id, scope.$index)"
						icon="el-icon-delete">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="添加友情链接" :visible.sync="insert_dialog_visible" @close="handleCloseDialog('insert_form')">
			<el-form :model="insert_form" :rules="rules" ref="insert_form" status-icon label-width="100px">
				<el-table-column label="轮播图片">
					<Upload_Picture v-model="insert_form.picture" :data="{type:'avatar'}"></Upload_Picture>
				</el-table-column>
				<el-form-item label="标题" prop="title">
					<el-input type="text" v-model="insert_form.title" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="链接地址" prop="url">
					<el-input type="text" v-model="insert_form.url" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="跳转方式" prop="target">
					<el-radio-group v-model="insert_form.target">
						<el-radio label="_blank">新窗口跳转</el-radio>
						<el-radio label="_self">本窗口跳转</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="显示顺序" prop="slide_order">
					<el-input type="text" v-model="insert_form.slide_order" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="insert_dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleInsert">添 加</el-button>
			</span>
		</el-dialog>
		<el-dialog title="编辑友情链接" :visible.sync="edit_dialog_visible" @close="handleCloseDialog('edit_form')">
			<el-form :model="edit_form" :rules="rules" ref="edit_form" status-icon label-width="100px">
				<el-table-column label="轮播图片">
					<Upload_Picture v-model="edit_form.picture" :data="{type:'avatar'}"></Upload_Picture>
				</el-table-column>
				<el-form-item label="标题" prop="title">
					<el-input type="text" v-model="edit_form.title" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="链接地址" prop="url">
					<el-input type="text" v-model="edit_form.url" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="跳转方式" prop="target">
					<el-radio-group v-model="edit_form.target">
						<el-radio label="_blank">新窗口打开</el-radio>
						<el-radio label="_self">本窗口打开</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="显示顺序" prop="slide_order">
					<el-input type="text" v-model="edit_form.slide_order" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="edit_dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleEdit">添 加</el-button>
			</span>
		</el-dialog>
	</el-card>
</template>

<script>
import Upload_Picture from '@/plugins/upload-picture.vue';
import { Slide } from '@/api';
export default {
	components: {
		Upload_Picture,
		},
	data() {
		return {
			tableData: [],
			insert_form: {
				slide_id: '',
				title: '',
				picture: '',
				url: 'http://',
				target: '',
				slide_order: '',
				update_time: new Date().toLocaleString(),
				create_time: new Date().toLocaleString(),
				usable: 1,
			},
			edit_dialog_visible: false,
			edit_form: {
				slide_id: '',
				title: '',
				picture: '',
				url: 'http://',
				target: '',
				slide_order: '',
			},
			insert_dialog_visible: false,
			current_slide: '',
			rules: {
				title: [{
					required: true,
					message: '请输入链接标题',
					trigger: 'blur',
				},],
				url: [{
					required: true,
					message: '请输入链接地址',
					trigger: 'blur',
				},],
				slide_order: [{
					required: true,
					pattern: /^\d/,
					message: '请输入显示顺序',
					trigger: 'blur',
				},],
				target: [{
					required: true,
					message: '请输入链接地址',
					trigger: 'blur',
				},],
				picture: [{
					required: true,
					message: '请输入链接地址',
					trigger: 'blur',
				},],
			}
		}
	},
	created() {
		this.loadList();
	},
	methods: {
		// 加载列表
		async loadList() {
			let { status, data } = await Slide.list({ pagesize: 20 });
			if (status) {
				this.tableData = data;
			}
		},
		handleInsert() {
			this.$refs.insert_form.validate(async (valid) => {
				if (valid) {
					let { status, msg, data } = await Slide.add({ ...this.insert_form });
					if (status) {
						// 操作DOM
						this.tableData.push({ ...this.insert_form, ...data });
						// 关闭弹窗
						this.insert_dialog_visible = false;
						// 信息提示
						this.$message.success(msg);
					} else {
						// 信息提示
						this.$message.error(msg);
					}
				}
			});
		},
		//打开编辑弹窗
		openEditDialog(slide) {
			console.log(slide);
			//缓存当前操作slide
			this.current_slide = slide;
			//还原表单
			this.edit_form = { ...slide };
			//打开弹窗
			this.edit_dialog_visible = true;
		},
		//编辑标签
		async handleEdit() {
			try {
				let valid = await this.$refs.edit_form.validate();
				if (valid) {
					let { status, msg } = await Slide.edit({ ...this.edit_form });
					if (status) {
						// 操作DOM
						Object.assign(this.current_slide, this.edit_form);
						// 关闭弹窗
						this.edit_dialog_visible = false;
						// 信息提示
						this.$message.success(msg);
					} else {
						// 信息提示
						this.$message.error(msg);
					}
				}
			} catch (error) {
				console.log(error);
			}
		},
		handleCloseDialog(resetForm) {
			// 清除表单验证状态
			this.$refs[resetForm].resetFields();
		},
		handleChange(usable, slide_id, index) {
			if (usable === 1) {
				this.$confirm('此操作将禁用该标签, 是否继续?', '确认', { type: 'warning' })
					.then(async () => {
						let unusable = -usable;
						let { status, msg } = await Slide.usable({ slide_id, usable: unusable });
						if (status) {
							this.tableData[index].usable = unusable;
							this.$message.success(msg);
						} else {
							this.$message.error(msg);
						}
					})
			}
			if (usable === -1) {
				this.$confirm('此操作将启用该标签, 是否继续?', '确认', { type: 'warning' })
					.then(async () => {
						let unusable = -usable;
						let { status, msg } = await Slide.usable({ slide_id, usable: unusable });
						if (status) {
							this.tableData[index].usable = unusable;
							this.$message.success(msg);
						} else {
							this.$message.error(msg);
						}
					})
			}
		},
		//删除标签
		handleRemove(slide_id, index) {
			this.$confirm('此操作将永久删除该标签, 是否继续?', '确认删除', { type: 'warning' })
				.then(async () => {
					//删除标签
					let { status, msg } = await Slide.remove({ slide_id });
					if (status) {
						//操作DOM
						this.tableData.splice(index, 1);
						//信息提示
						this.$message.success(msg);
					} else {
						//信息提示
						this.$message.error(msg);
					}
				}).catch(() => {
					this.$message.info('已取消删除');
				});
		},
	},
}

</script>

<style></style>
